<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/head :: header('桀骜的个人博客')"/>
    <link th:href="@{/front/css/plugs_paging.css}" rel="stylesheet"/>
    <link th:href="@{/front/css/diary.css}" rel="stylesheet"/>
    <link th:href="@{/front/css/categories.css}" rel="stylesheet"/>
</head>
<body>
<div id="app">
    <div th:include="common/head :: nav('桀骜的个人博客')"></div>
    <!--页面主体-->
    <div id="main">
        <nav data-am-widget="menu" class="am-menu am-menu-dropdown2" data-am-menu-collapse></nav>
        <div class="am-container">
            <div class="am-g">
                <div class="site-inner">
                    <div class="am-u-sm-12 am-u-md-3">
                        <div class="categories">

                        </div>
                    </div>
                    <div class="am-u-sm-12 am-u-md-9">
                        <div class="categoryTimeline">
                            <!--消除留言先加载视觉效果-->
                            <div class="timeline timeline-wrap">
                                <div class="timeline-row">
                                <span class="node"
                                      style="-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;">
                                    <i class=""></i>
                                </span>
                                    <h1 class="title"></h1>
                                </div>
                                <div class="timeline-row-major">
                                    <div style="height: 88.4px">
                                    </div>
                                </div>
                                <div class="timeline-row-major">
                                    <div style="height: 88.4px">
                                    </div>
                                </div>
                                <div class="timeline-row-major">
                                    <div style="height: 88.4px">
                                    </div>
                                </div>
                                <div class="timeline-row-major">
                                    <div style="height: 88.4px">
                                    </div>
                                </div>
                                <div class="timeline-row-major">
                                    <div style="height: 88.4px">
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--消息盒子+反馈-->
    <div th:include="common/other :: other"></div>
    <!--引入共有底部-->
    <div th:include="common/footer :: footer"></div>
</div>

<script type="text/javascript" th:src="@{/front/js/redirect.js}"></script>
<script type="text/javascript" th:src="@{/front/js/all.js}"></script>
<script type="text/javascript" th:src="@{/front/js/plugn/plugs_paging.js}"></script>

<script th:inline="javascript">
    var catalogId = "";
    var timeOption = "";

    var diaryDetilUrl = '/front/diary/diaryDetil?diaryId=';


    //初始化相册目录
    initCatalog();

    $(document).ready(function () {
        queryTime();
        queryDiary(1);
    });

    //获取相册目录树
    function initCatalog() {
        $.ajax({
            type: 'get',
            url: '/front/diary/treeData',
            dataType: 'json',
            async: false,
            data: {
                module: "diary"
            },
            success: function (data) {
                if (data) {
                    putCatalog(data);
                }
            }
        });
    }

    //填充目录树
    function putCatalog(data) {
        let rootNode = data[0];
        let content = '<ul class="am-menu-nav am-avg-sm-4 am-collapse">';
        for (let i = 1; i < data.length; i++) {
            let item = data[i];
            if (rootNode.id == data[i].pId) {
                content += '<li class="am-parent" id="menu_' + data[i].id + '">' +
                    '<a><span onclick="clickCatalog(' + data[i].id + ')">' + data[i].name + '</span></a>' +
                    '<ul class="am-menu-sub am-collapse  am-avg-sm-2 ">';
                for (j = i; j < data.length; j++) {
                    if (data[i].id == data[j].pId) {
                        content += '<li class="am-parent" id="menu_' + data[j].id + '">' +
                            '<a onclick="clickCatalog(' + data[j].id + ')">' + data[j].name + '</a>' +
                            '</li>';
                    }
                }
                content += '</ul></li>';
            }
        }
        content += '</ul>';
        $(".am-menu-dropdown2").append(content);

        if (data.length >= 2) {
            catalogId = data[1].id;
        }
    }

    //选择目录
    function clickCatalog(id) {
        catalogId = id;
        //查询左侧时间栏
        queryTime();
        //查询日记列表
        queryDiary(1);
    }

    //获得归档日期以及该归档日期下的文章数量
    function queryTime() {
        $.ajax({
            type: 'GET',
            url: '/front/diary/timeData',
            dataType: 'json',
            data: {
                id: catalogId
            },
            success: function (data) {
                if (null == data) {
                    return;
                }
                var categories = $('.categories');
                categories.empty();
                categories.append($('<div class="categories-title">' +
                    '<h3 style="font-size: 20px">日期归档</h3>' +
                    '</div>'));
                var categoriesComment = $('<div class="categories-comment am-animation-slide-top"></div>');
                $.each(data, function (index, obj) {
                    let time = obj.timeOption.replace("-","");
                    categoriesComment.append($('<div class="category">' +
                        '<span>' +
                        '<a class="categoryName" onclick="clickTime(' + time + ')">' + obj.timeOption + '</a>' +
                        '<span class="categoryNum">(' + obj['timeNum'] + ')</span>' +
                        '</span>' +
                        '</div>'));
                });
                categories.append(categoriesComment);
                $('.categoryName').click(function () {
                    var $this = $(this);
                    var archiveName = $this.html();
                    queryDiary(1);
                })
            },
            error: function () {
                alert("获取日记信息失败");
            }
        });
    }

    //点击时间
    function clickTime(time) {
        timeOption = time;
        //查询日记列表
        queryDiary(1);
    }

    //查询日记
    function queryDiary(currentPage) {
        var param = {
            pageSize: 10,
            pageNum: currentPage ? currentPage : 1,
            catalogId: catalogId,
            timeOption: timeOption
        }

        $.ajax({
            type: 'POST',
            url: '/front/diary/diaryList',
            dataType: 'json',
            data: param,
            success: function (data) {
                if (data.code != 0) {
                    dangerNotice("服务器异常，获得日记信息失败");
                } else {
                    //放入数据
                    putDiaryInfo(data.rows);
                    //分页
                    $("#pagination").paging({
                        rows: param.pageSize,//每页显示条数
                        pageNum: param.pageNum,//当前所在页码
                        pages: Math.ceil(data.total / param.pageSize),//总页数
                        total: data.total,//总记录数
                        callback: function (currentPage) {
                            queryDiary(currentPage);
                        }
                    });
                }
            },
            error: function () {
                alert("获取日记信息失败");
            }
        });
    }

    //填充日记
    function putDiaryInfo(data) {
        var categoryTimeline = $('.categoryTimeline');
        categoryTimeline.empty();
        var timeline = $('<div class="timeline timeline-wrap"></div>');
        var strArray = new Array();
        $.each(data, function (index, obj) {
            let releaseTime = obj['releaseTime'].substring(0, 9);
            let year = obj['releaseTime'].substring(0, 4);
            let month = obj['releaseTime'].substring(5, 7);


            if ($.inArray(year, strArray) == -1) {
                strArray.push(year);
                timeline.append($('<div class="timeline-row-major">' +
                    '<span class="node am-animation-slide-top am-animation-delay-1"></span>' +
                    '<div class="nodeYear am-animation-slide-top am-animation-delay-1">' + year + '年&nbsp;' + month + '月</div>' +
                    '</div>'));
            }
            var timelineRowMajor = $('<div class="timeline-row-major"></div>');
            timelineRowMajor.append($('<span class="node am-animation-slide-top am-animation-delay-1"></span>'));
            var content = $('<div class="content am-comment-main am-animation-slide-top am-animation-delay-1"></div>');
            content.append($('<header class="am-comment-hd" style="background: #fff">' +
                '<div class="contentTitle am-comment-meta">' +
                '<a href="'+diaryDetilUrl + obj['id'] + '">' + obj['title'] + '</a>' +
                '</div>' +
                '</header>'));
            var amCommentBd = $('<div class="am-comment-bd"></div>');
            amCommentBd.append($('<i class="am-icon-calendar"> <span>' + releaseTime + '</span></i>&nbsp;&nbsp;' +
                '<i class="am-icon-folder"> <span>' + obj['catalogName'] + '</span></i>'));
            content.append(amCommentBd);
            timelineRowMajor.append(content);
            timeline.append(timelineRowMajor);
        });
        categoryTimeline.append(timeline);
        categoryTimeline.append($('<div class="my-row" id="page-father">' +
            '<div id="pagination">' +
            '<ul class="am-pagination  am-pagination-centered">' +
            '<li class="am-disabled"><a href="#">&laquo; 上一页</a></li>' +
            '<li class="am-active"><a href="#">1</a></li>' +
            '<li><a href="#">2</a></li>' +
            '<li><a href="#">3</a></li>' +
            '<li><a href="#">4</a></li>' +
            '<li><a href="#">5</a></li>' +
            '<li><a href="#">下一页 &raquo;</a></li>' +
            '</ul>' +
            '</div>' +
            '</div>'));
    }
</script>
</body>
</html>
